import React, { useRef, useState, useEffect } from "react";
import { Button, Input, Divider } from "antd";

const UseRef: React.FC = (): React.ReactElement => {
  const inputRef = useRef<any>(null);

  const atrAef = (): void => {
    const val: string = inputRef.current!.state.value;
    console.log(val);
    // inputRef.current!.state.value = "直接进行一个注入完成";
  };
  const [text, setstate] = useState("hcl");
  const textRef = useRef<any>();
  useEffect(() => {
    textRef.current = text;
    console.log("textRef value: " + text);
  }, [text]);
  return (
    <div>
      <Input placeholder="Basic usage" ref={inputRef} />
      <Button onClick={atrAef}>显示文字</Button>
      <Divider orientation="left">else tip</Divider>
      <input
        value={text}
        onChange={(e) => {
          setstate(e.target.value);
        }}
      />
    </div>
  );
};
export default UseRef;
